<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="Pragma" content="no-cache"> 
<meta http-equiv="Cache-Control" content="no-cache"> 
<meta http-equiv="Expires" content="Thu, 01 Dec 1994 16:00:00 GMT"> 
<title>Story Builder</title>



<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.19/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.19/jquery-ui.min.js" type="text/javascript"></script>


<script src="../resources/js/ajaxUploader.js" type="text/javascript"></script>
<script src="../resources/js/myStory.js" type="text/javascript"></script>
<link rel="stylesheet" href="../resources/css/myStory.css" type="text/css"/>


</head>
<body>


	<script type="text/javascript">
		$(document).ready(function() {

			var server = 'http://10.84.5.134:8080';
			var story = new Story(1);
			var storyController = new StoryController(story);
			
			$("#new").click(function() {
				var storyObjectId = story.addStoryObject(null, 0, 0, 130, 130, null);
				storyController.setStory(story);
				storyController.refresh();
			});
			$("#load").click(function() {
				jQuery.support.cors = true;
				$.ajax({
					url : server + '/mestory/rest/load?' + new Date().getTime(),
					type : 'GET',
					dataType : "xml",
					data : '',
					success : function(xml) {
						var xmlstories = xml.getElementsByTagName('storyobjects');
						story.clearStoryObjects();
						story = new Story((xml.getElementsByTagName('story'))[0].getAttribute('sid'));
						for (var i = 0; i < xmlstories.length; i++) {   
							var soid = xmlstories[i].getElementsByTagName("soid")[0].childNodes[0].nodeValue;
							var offsetLeft = xmlstories[i].getElementsByTagName("left")[0].childNodes[0].nodeValue;
							var offsetTop = xmlstories[i].getElementsByTagName("top")[0].childNodes[0].nodeValue;
							var height = xmlstories[i].getElementsByTagName("height")[0].childNodes[0].nodeValue;
							var width = xmlstories[i].getElementsByTagName("width")[0].childNodes[0].nodeValue;
							var imageName = xmlstories[i].getElementsByTagName("imageName")[0].childNodes[0].nodeValue;
							story.addStoryObject(soid, offsetLeft, offsetTop, height, width, imageName);
						}
						
						storyController.setStory(story);
						storyController.refresh();
						
					},
					error : function(xhr, ajaxOptions, thrownError) {
						alert(thrownError);
						$("#content").append("<p>Error: " + xhr.status + "," + thrownError + "</p>");
					}
				});
			});
			$("#save").click(function() {
				jQuery.support.cors = true;
				$.ajax({
					url : server + '/mestory/rest/save',
					beforeSend: function(xhr) {
			            xhr.setRequestHeader('content-type', 'application/xml');
			        },
					type : 'POST',
					dataType : "xml",
					data : '<?xml version="1.0" encoding="UTF-8"?>' + storyController.getXml().html(),
					error : function(xhr, ajaxOptions, thrownError) {
						$("#message").html("<p>Error: " + xhr.status + "," + thrownError + "</p>");
					},
					success : function(xml) {
						$("#message").html("<p>Success save</p>");
					}

				});
				alert(storyController.getXml().html());
			});

			$("#refresh").click(function() {
				storyController.refresh();
			});
			
		});
	</script>



	<div class="demo">



		<h3 class="docs">Story:</h3>	
		<div id="set"></div>
		<div id="debug"></div>
		<div id="new">New</div>
		<div id="load">Load</div>
		<div id="save">Save</div>
		<div id="refresh">Refresh</div>
		<div id="message"></div>
	</div>
	<!-- End demo -->



</body>
</html>
